<template>
  <div>
     <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>我的课程</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-button style="float:left;margin-top: 15px;margin-left:15px;" type="primary" icon="el-icon-back" @click="openCourse()" >返回课程列表</el-button>
    <el-button style="float:left;margin-top: 15px;" type="primary" icon="el-icon-refresh" @click="load()" >刷新</el-button>

   <el-card style="margin: 15px 1%;width: 98%">
      <el-table :data="data" border style="width: 100%" :max-height="tableHeight">
        <el-table-column prop="productName" label="课程名称" fit></el-table-column> 
        <el-table-column prop="payTime" label="报名时间" fit></el-table-column>
        <el-table-column prop="payAmount" label="费用" fit></el-table-column>
        <el-table-column label="课程详情"  width="80" fit>
          <template slot-scope="scope">
            <el-link type="primary" @click="findByCourseId(scope.row.productId)">课程详情</el-link>
          </template>
        </el-table-column>
      </el-table>
    <!-- 引入弹窗组件 -->
    <course-dialog  ref="dialog1"></course-dialog>
    </el-card>
  </div>
</template>

<script>
import CourseDialog from '../../courseIndex/CourseDialog'
// 引入之后 使用 banner-create 进行使用
  
export default {
  name: 'MyCourse',
  components: { CourseDialog },
  data () {
    return {
      data: [],
      course: []
    }
  },
  mounted () {
    this.load()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 250
    }
  },
  methods: {
     openCourse () { // 返回课程列表
        this.$router.push({ path: '/admin/course' })
    },
    load () {
      var _this = this
      this.$axios.post('/admin/course/myCourse').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result
          this.$message({
            type: 'success',
            message: '获取成功'
          })
        } else {
          // 从后端返回错误信息
          this.$alert(resp.data.message, '错误提示', {
            type: 'error',
            dangerouslyUseHTMLString: true
          })
        }
      })
    },
    findByCourseId (CourseId) {
      var _this = this
      this.$axios.get('/admin/courseByCourseId/' + CourseId).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.course = resp.data.result
          _this.openDialog(_this.course)
        } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
        }
      })
    },
    openDialog (item) {
      this.$refs.dialog1.data = {
        id: item.id,
        courseName: item.courseName,
        courseHour: item.courseHour,
        num: item.num,
        courseTime: item.courseTime,
        courseTuition: item.courseTuition,
        ptTuition: item.ptTuition,
        courseType: item.courseType,
        teacher: item.teacher,
        courseDesc: item.courseDesc,
        imageUrl: item.imageUrl,
        videoUrl: item.videoUrl
      }
      this.$refs.dialog1.dialogTableVisible = true
    }
  }
}
</script>

<style scoped>
.add-button {
     margin: 0px 0 20px 15px;
  }
</style>
